import { DecorativeLine } from "@/components/base/DecorativeLine"
import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"
import { Link } from "react-router-dom"

const FollowUsStyled = styled.section`
    font-family: Gilroy;
    margin: 29rem 12rem 0;
    padding-bottom: 29rem;
`

const Title = styled.h3`
    padding: 0;
    margin: 0;
    margin-top: 7rem;
    font-weight: 700;
    font-size: 16rem;
    height: 24rem;
    line-height: 24rem;
    text-align: center;
`

const SocialContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24rem;
    flex-wrap: nowrap;
    height: 44rem;
    margin-top: 8rem;
`

const Social = styled.img`
    width: 36rem;
    height: 36rem;
    border-radius: 6rem;
    object-fit: contain;
`

const ALink = styled(Link)`
    width: 36rem;
    height: 36rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
`

const followItems = [
    {
        icon: resolveAssetImage("pages/HomePage/img_fb.webp"),
        link: "https://www.facebook.com/share/HsrTMrvkWGUvSK5y/",
    },
    {
        icon: resolveAssetImage("pages/HomePage/img_ig.webp"),
        link: "https://www.instagram.com/filbet01?igsh=MXFyb3hzNTRwYmZ4NA==",
    },
    {
        icon: resolveAssetImage("pages/HomePage/img_x.webp"),
        link: "https://x.com/Filbet_6",
    },
    {
        icon: resolveAssetImage("pages/HomePage/img_tg.webp"),
        link: "https://t.me/Filbetofficial",
    },
    {
        icon: resolveAssetImage("pages/HomePage/img_viber.webp"),
        link: "https://www.viber.com/filbet",
    },
]

export function FollowUs() {
    return (
        <FollowUsStyled>
            <DecorativeLine
                width={351}
                height={1}
                color={"#D5D5D8"}
            />
            <Title>Follow Us</Title>
            <SocialContainer>
                {followItems.map(({ link, icon }, idx) => {
                    return (
                        <ALink
                            to={link}
                            key={`social_item_${idx}`}
                            target="_blank"
                        >
                            <Social
                                key={`social_item_${idx}`}
                                src={icon}
                                alt=""
                            />
                        </ALink>
                    )
                })}
            </SocialContainer>
        </FollowUsStyled>
    )
}
